<template>
    <div class="order">
        <form action="" @submit.prevent="edit">
            <div class="common-form">
                <div class="order-user">
                    <div class="order-add-user">
                        <label>收货人</label>
                        <input type="text" v-model="readAdd.name"/>
                    </div>
                    <div class="order-add-user">
                        <label for="">手机号码</label>
                        <input type="text" v-model="readAdd.tel"/>
                    </div>
                    <div class="order-add-user">
                        <label for="">所在地区</label>
                        <div class="city">
                            <v-distpicker :province="readAdd.province" :city="readAdd.city" :area="readAdd.area" @selected="onSelected"></v-distpicker>
                        </div>
                    </div>
                    <div class="order-add-user-textarea">
                        <label for="">详细地址</label>
                        <textarea  v-model="readAdd.address"></textarea>
                    </div>
                </div>
            </div>
            <!-- <div class="common-form">
                <div class="order-select-info">
                    <em class="order-select"></em>
                    <div class="order-select-info-name">
                        设为默认地址
                    </div>
                    <div class="order-add-info-add">
                        <span>提示：每次下单时使用该地址</span>
                    </div>
                </div>
            </div> -->
            <div class="footer-100"></div>
            <!-- 支付 -->
            <button class="btn-big"  type="submit" >保存</button>
        </form>
	</div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
import VDistpicker from 'v-distpicker'
    export default {
        name:'AddressAdd',
        data () {
            return {
                readAdd:{
                    address:'',
                    tel:'',
                    name:'',
                    province:'',
                    city:'',
                    area:'',
                },
                select: { province: '广东省', city: '广州市', area: '海珠区' },
            }
        },
        components: { VDistpicker },
        methods:{
            //获取地址
            onSelected:function(data){
                // console.log(this.select.province)
                console.log(data)
                this.readAdd.area = data.area.value
                this.readAdd.city = data.city.value
                this.readAdd.province = data.province.value
            },
            // /vipmember/index/readAddress
            read:function(){
                console.log(this.$route.params.id)
                var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
                    address_id:this.$route.params.id
                }
                this.$http.post('/vipmember/index/readAddress',qs.stringify(upload)).then(rs=>{
                    console.log(rs.data)
                    this.readAdd = rs.data
                }).catch(err=>{
                    console.log(err)
                })
            },
            edit:function(){
                var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
                    id:this.$route.params.id,
                    name:that.readAdd.name,
                    tel:that.readAdd.tel,
                    address:that.readAdd.address,
                    area:this.readAdd.area,
                    city:this.readAdd.city,
                    province:this.readAdd.province
                }
                this.$http.post('/vipmember/index/editAddress',qs.stringify(upload)).then(rs=>{
                    console.log(rs.data)
                    if( rs.data.status == 400){
                        alert(rs.data.info)
                    }else{
                        // that.$router.push({name:'AddressList'});
                        this.$router.go(-2)
                    }
                    
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        mounted(){
            // this.edit();
            this.read();
            this.onSelected();
        }
    }
</script>

<style scoped>
.btn-big{
    width: 100%;
    height: 49px;
    line-height: 49px;
    text-align: center;
    color: #FFF;
    background: #FE2746;
    position: fixed;
    bottom: 0;
    left: 0;   
    border:0;
}
.city{
    width:71%;
    display: inline-block;
    float: left;
}
.distpicker-address-wrapper{
    width: 100%;
    display: inline-block;
    float: left;
}
</style>